<template>
  <!-- 首页组件 -->
  <div>
    <!-- 轮播 -->
    <div class="carousel-box">
      <el-carousel class="carouseItem">
        <el-carousel-item v-for="item in 4" :key="item" class="carouselSmall">
          <el-image :src="carousel" class="carouse-image" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 累计，项目，注册 -->
    <div class="three-box">
      <div v-for="(item, index) in threeList" :key="index" class="threeItem">
        <el-image :src="item.image" class="three-image" />
        <div class="three-content">
          <span class="three-num">{{ item.num }}</span>
          <span class="three-value">{{ item.value }}</span>
        </div>
      </div>
    </div>
    <!-- 高效的技术员工招聘解决方案 -->
    <div class="solution">
      <div class="solution-text publicText">高效的技术员工招聘解决方案</div>
      <!-- 流程开发 -->
      <div class="solution-Process">
        <div class="solution-first">
          <span class="firstext">全流程开发</span>
          <div style="position: relative">
            <el-image :src="flowFirst" class="solutionFirst" />
            <el-image :src="flowBox" class="solutionSecond" />
            <div class="solutionview">
              <span class="position">产品经理</span>
              <span class="demand">需求梳理更彻底 </span>
              <span class="demand">产品更合理</span>
            </div>
          </div>
        </div>
        <!-- list -->
        <div
          class="solution-list"
          v-for="(item, index) in solutionList"
          :key="index"
        >
          <span class="magrinTop position">{{ item.name }}</span
          ><span class="demand">{{ item.value }}</span
          ><span class="demand">{{ item.small }}</span>
        </div>
      </div>
    </div>
    <!-- 全面的软件开发服务 -->
    <div class="publicImage development-service"></div>
    <!-- 为什么要选择驻场无忧 -->
    <div class="way-chosecarefree">
      <div class="carefree-text publicText">为什么要选择驻场无忧</div>
      <div class="carefree-three">
        <div
          v-for="(item, index) in carefreeList"
          :key="index"
          class="carefree-item"
        >
          <el-image :src="item.careImage" class="carefree-image" />
          <span class="carefreeText">{{ item.text }}</span>
        </div>
      </div>
    </div>
    <!-- 合作流程 -->
    <div class="cooperation-process">
      <div class="cooperation-box">
        <div class="cooperation-text publicText">合作流程</div>
        <div class="cooperationList">
          <div
            v-for="(item, index) in cessList"
            :key="index"
            class="cooperationItem"
          >
            <div class="globe-ball">
              <el-image :src="item.image" class="ballImage" />
            </div>
            <span class="cessTop position"> {{ item.name }}</span>
            <div class="cessText demand">
              {{ item.firsText }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 灵活用工场景 -->
    <div class="flexible-work">
      <div>
        <div class="flexible-title">灵活用工场景</div>
        <div class="flexible-list">
          <div
            v-for="(item, index) in flexibleList"
            :key="index"
            @click="choseFlexible(item, index)"
            :class="flexibleIndex == index ? 'choseItem' : 'default'"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="choseWork"></div>
    </div>
    <!-- 开始寻找你的外包人才 -->
    <div class="publicImage begin-box"></div>
    <!-- 他们都在选择驻场无忧 -->
    <div class="all-carefree">
      <div class="careAll-title">他们都在选择驻场无忧</div>
      <span class="careAll-text"
        >我们的需求方在码市平台体验高效精准的人才匹配服务，开发者体验更便捷的接单服务</span
      >
      <el-carousel
        :autoplay="false"
        indicator-position="none"
        type="card"
        class="carefreeBox"
      >
        <el-carousel-item v-for="item in 6" :key="item" class="carefreeItem">
          15515151
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  cessFourth,
  cessThirdly,
  ceenSecond,
  cessFirst,
  cessFifth,
  blue,
  orgin,
  green,
  carousel,
  developer,
  preject,
  sum,
  flowFirst,
  flowBox,
} from "@/config/userFileImg.js";

// import carousel from "@/assets/carousel.png";
// import developer from "@/assets/developer.png";
// import preject from "@/assets/preject.png";
// import sum from "@/assets/sum.png";
// import flowFirst from "@/assets/flowFirst.png";
// import flowBox from "@/assets/flowBox.png";

// import blue from "@/assets/blue.png";
// import orgin from "@/assets/orgin.png";
// import green from "@/assets/green.png";
// 合作流程
// import cessFifth from "@/assets/cessFifth.png";
// import cessFirst from "@/assets/cessFirst.png";
// import ceenSecond from "@/assets/ceenSecond.png";
// import cessThirdly from "@/assets/cessThirdly.png";
// import cessFourth from "@/assets/cessFourth.png";

const threeList = ref([
  { num: "12,305,211", value: "累计金额（元）", image: sum },
  { num: "123,149", value: "项目数量", image: preject },
  { num: "1379,191", value: "注册开发者", image: developer },
]);
const solutionList = ref([
  { name: "UI设计师", value: "界面更美观", small: "视觉体验更优秀" },
  { name: "开发工程师", value: "系统更稳定", small: "数据更安全" },
  { name: "开发团队", value: "实施更系统", small: "协作效率更高" },
  { name: "测试工程师", value: "Bug数量更少", small: "产品质量更高" },
]);
const carefreeList = ref([
  { careImage: green, text: "海量人才匹配" },
  { careImage: blue, text: "专注软件领域" },
  { careImage: orgin, text: "官方款项托管" },
]);
// 合作流程
const cessList = ref([
  {
    image: cessFifth,
    name: "企业发布需求",
    firsText: "1工作日，客户经理在1小时内联系您",
  },
  {
    image: cessFirst,
    name: "匹配开发者",
    firsText: "智能引擎+人工再确认为你在近98万开发者中筛选",
  },
  {
    image: ceenSecond,
    name: "企业面试开发者",
    firsText: "无偿为您对接多轮面试",
  },
  {
    image: cessThirdly,
    name: "托管费用",
    firsText: "平台暂托管费用全程跟进开发过程",
  },
  {
    image: cessFourth,
    name: "企业验收无误",
    firsText: "开发完成企业验收无误后再给开发者结算",
  },
]);

const flexibleList = ref([
  { name: "小微企业" },
  { name: "个人" },
  { name: "冷门语言开发" },
  { name: "传产企业" },
  { name: "开发团队、公司" },
  { name: "海外企业" },
]);
const flexibleIndex = ref(0);
const choseFlexible = (item, index) => {
  flexibleIndex.value = index;
};
</script>
<style lang="scss" scoped>
.carousel-box {
  height: 500px;
}
.carouseItem {
  height: 500px;
}
.carouselSmall {
  height: 500px;
}
.carouse-image {
  width: 1920px;
  height: 500px;
}

.three-box {
  margin: auto;
  height: 148px;
  // background: aquamarine;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 64px 359px;
}
.threeItem {
  width: 294px;
  height: 68px;
  background: #ffffff;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px 16px 16px 16px;
  display: flex;
  align-items: center;
  padding: 40px;
  gap: 12px;
  cursor: pointer;
}
.three-image {
  width: 68px;
  height: 68px;
}
.three-content {
  height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  & {
    font-style: normal;
    text-transform: none;
  }
}
.three-num {
  font-family: D-DIN Condensed-DINCondensed, D-DIN Condensed-DINCondensed;
  font-weight: bold;
  font-size: 32px;
  color: #333333;
}
.three-value {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 20px;
  color: #86909c;
}
.solution-Process {
  margin-top: 56px;
  position: relative;
  display: flex;
  align-items: center;
}
.solution {
  height: 310px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 97px 0 141px 0;
}
.solution-text {
  width: 312px;
}

.carefree-text {
  width: 240px;
}
.solution-first {
  display: flex;
  flex-direction: column;
  width: 390px;
  height: 214px;
  .firstext {
    position: absolute;
    top: 0;
    left: 30px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 18px;
    color: #165dff;
    font-style: normal;
    text-transform: none;
  }
  .solutionFirst {
    width: 304px;
    height: 190px;
    z-index: 1;
    position: absolute;
    top: 20px;
  }
  .solutionSecond {
    position: absolute;
    top: 0;
    right: 0;
    width: 178px;
    height: 214px;
  }
  .solutionview {
    position: absolute;
    right: 40px;
    top: 122px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
.position {
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 20px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  padding-bottom: 8px;
}
.demand {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #86909c;
  font-style: normal;
  text-transform: none;
}
.solution-list {
  // margin-left: 100px;
  background-size: cover;
  background-image: url("@/assets/flowbackground.png");
  width: 202px;
  height: 214px;
  // background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.magrinTop {
  margin-top: 100px;
}
.development-service {
  background-image: url("@/assets/overall.png");
}
.begin-box {
  background-image: url("@/assets/begin.png");
}
.way-chosecarefree {
  height: 432px;
  background: #ffffff;
  padding: 80px 0 140px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carefree-three {
  display: flex;
  align-items: center;
  margin-top: 56px;
}
.carefree-item {
  position: relative;
}
.carefree-image {
  width: 419px;
  height: 238px;
}
.carefreeText {
  position: absolute;
  top: 84px;
  left: 59px;
  z-index: 1;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28px;
  color: #ffffff;
  line-height: 38px;
  font-style: normal;
  text-transform: none;
}
// 合作流程
.cooperation-process {
  height: 542px;
  background: #ffffff;
}
.cooperation-box {
  height: 248px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("@/assets/cooperation.png");
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-top: 80px;
}
.cooperation-text {
  width: 96px;
}
.cooperationList {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 72px;
}
.cooperationItem {
  width: 222px;
  height: 244px;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
  border-radius: 16px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.cessText {
  width: 115px;
  text-align: center;
  // background: aqua;
  margin-top: 16px;
}
.ballImage {
  width: 36px;
  height: 36px;
}
.globe-ball {
  position: absolute;
  top: -35px;
  width: 70px;
  height: 70px;
  background: #165dff;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cessTop {
  margin-top: 94px;
}
// 灵活用工场景
.flexible-work {
  height: 638px;
  background: #f8fafa;
  display: flex;
  justify-content: center;
  align-items: center;
  // > div {
  //   background: aqua;
  // }
}
.flexible-title {
  margin-left: 20px;
  margin-bottom: 24px;
  width: 144px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  line-height: 28px;
  font-style: normal;
  text-transform: none;
  border-bottom: 6px solid #165dff;
}
.careAll-title {
  margin-top: 80px;
  width: 240px;
  height: 58px;
  margin-bottom: 24px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  border-bottom: 6px solid #165dff;
}
.flexible-list {
  width: 316px;
  height: 360px;
  background: #fff;
  border-radius: 16px 0 0 16px;
  > div {
    height: 60px;
    line-height: 60px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    font-style: normal;
    text-transform: none;
    padding-left: 20px;
  }
}
.choseItem {
  background: #165dff;
  color: #ffffff;
  position: relative;
  &:before {
    content: "";
    position: absolute;
    top: 20px;
    right: -14px;
    bottom: 0;
    animation-name: example;
    animation-duration: 0.4s;
    z-index: 1;

    width: 0px;
    height: 0px;
    border-width: 12px 0px 12px 14px;
    border-style: solid;
    border-color: transparent transparent transparent #165dff;
  }
}
.default {
  color: #333333;
}
.choseWork {
  width: 814px;
  height: 418px;
  background-size: cover;
  background-image: url("@/assets/flexible.png");
}
.all-carefree {
  height: 654px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.careAll-text {
  margin-top: 14px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #606a78;
  font-style: normal;
  text-transform: none;
}
.carefreeBox {
  margin: auto;
  width: 1920px;
}
.carefreeItem {
  width: 618px;
  height: 272px;
  margin: 0 200px;
  background: #99a9bf;
  box-shadow: 0px 4px 31px 0px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}

// 公共的
.publicText {
  height: 58px;
  text-align: center;
  border-bottom: 4px solid #165dff;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  font-style: normal;
  text-transform: none;
  display: flex;
}
.publicImage {
  height: 400px;
  background-size: cover;
}
</style>
<style scoped>
</style>
